$(function () {
    var ls = localStorage;
    init();
    function init() {
        eventList();
        load_data();
    }
    /* 
    1.点击搜索
        获取输入框的值
    2.检查合法性
        1.非空 空 length==0 return
        2.合法
    3.把数据存入到本地存储中
        1.存入的是数组字符串
        2.本地存储,存入的复杂类型 对象 obj 数组 arr
        数据丢失
        存复杂数据 先转换成json字符串 再存入
        获取   先获取->再解析成对象
    */

   

    //1.绑定一腿事件
    function eventList() {
        //1 注册搜索按钮的点击事件
        $("#search_btn").on("tap",function () {
            //1.1 获取输入值 trim:去除输入框两边的空格
            var search_txt = $("#search_inp").val().trim();
            // console.log(search_txt);  获取到了输入框的值
            //1.2 检查合法性
            if (!search_txt) {
                //mui封装好的方法  mui.toast:消息提示框(自动消失提示)
                mui.toast("输入非法");
                return;
            } 

            //1.3存入数据
            var arr = ls.getItem("lt_history")?JSON.parse(ls.getItem("lt_history")):[];
            console.log(arr);

            //该判断需在再插入数据前进行判断
            //1.6 数组去重
            arr.forEach(function (v, i) {
                // console.log(v,i);
                //判断v的值跟输入框当中的数据是否有相同的
                if (v == search_txt) {
                    //删除数组当中的这个值
                    //再重新添加
                    arr.splice(i,1);
                }
            })

            //      push 在数组的最后插入数据
            //1.4   unshift 在数组的头部插入数据
            arr.unshift(search_txt);

            //1.5 转换json类型
                var arrJson = JSON.stringify(arr);
                ls.setItem("lt_history",arrJson);

            //1.7 跳转页面
            location.href="./searchList.html?proName="+search_txt;
        });


        //3.清空按钮
        $(".clear_btn").on("tap",function () {
            // 清空历史搜索
            ls.removeItem("lt_history");

            //当前方法也可以
            // ls.clear(); 

            //清空 可以
            // ls.setItem("lt.history",JSON.stringify({}));
        })

        //4.点击删除字体图片单个删除数据
        //使用委托的方法
        $(".history_content").on("tap",".remove_btn",function () {
            // console.log(123);
            
            //4.1 获取要删除元素的索引
            var index = $(this).data("index");
            // console.log(index);

            //4.2 获取本地数据的数组  获取要删除对应索引的数据
            var arr = ls.getItem("lt_history") ? JSON.parse(ls.getItem("lt_history")) : [];
            
            //4.3 删除数组对应索引的数据
            arr.splice(index,1);

            //4.4 删除数据后,以字符串的形式重新保存数据,再渲染
            ls.setItem("lt_history",JSON.stringify(arr));

            //4.5把删除后的数据重新渲染
            load_data();
        })
    }

    //2.加载本地数据
    function load_data() {
        //2.1 arr = 正常的数组 或者 空数组[]
        var arr = ls.getItem("lt_history")?JSON.parse(ls.getItem("lt_history")):[];
        console.log(arr);
        

        //2.2 判断arr数组的索引是否等于0
        if (arr.length == 0) {
            //4.6当长度为0的时候,直接渲染程控,在return;不然当索引为0的时候,索引第0个删除不了
            $(".history_content").html("");
            return;
        }

        //2.3 渲染数据
        var html = template("mainTpl",{arr:arr});  
        $(".history_content").html(html);
    }

})